<template>
  <el-dialog :class="'el-dialog-theme3'" ref="dialogRef" v-model="isShowTargetDialog"
    title="新增 / 编辑技术指标" width="40%" draggable destroy-on-close :close-on-click-modal="false" @close="reset">
    <el-form ref="targetFormRef" label-width="100px" :model="addTargetForm" :rules="rules">
      <el-form-item label="检测项目：" prop="bucketId">
        <el-select v-model="addTargetForm.bucketId" clearable filterable remote reserve-keyword remote-show-suffix
          :remote-method="remoteMethod" :loading="loading" style="width: 100%">
          <el-option v-for="item in jcxmList" :key="item.bucketId" :value="item.bucketId" :label="item.jcxmName">
            <span v-html="transformation(item.jcxmName)"></span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="准确度：">
        <el-input clearable maxlength="100" v-model="addTargetForm.accuracy" />
      </el-form-item>

      <el-form-item label="量程：">
        <el-input clearable maxlength="100" v-model="addTargetForm.lc" />
      </el-form-item>

      <el-form-item label="分辨率：">
        <el-input clearable maxlength="100" v-model="addTargetForm.fbl" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="success" @click="saveBtnClick">保存</el-button>
      <el-button type="danger" @click="cancelBtnClick">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { addInstrumentItem } from "@/api/resource/instrumentItem";
import { getJcxmList } from "@/api/resource/ledger";
const { proxy } = getCurrentInstance();

const isShowTargetDialog = ref(false);
const addTargetForm = ref({});
const targetItemId = ref("");

const rules = ref({
  bucketId: [{ required: true, message: "检测项目不能为空", trigger: "blur" }],
});

const props = defineProps({
  instrumentId: {
    type: String,
  },
});

const emits = defineEmits(["updateTargetList"]);

const saveBtnClick = async () => {
  proxy.$refs["targetFormRef"].validate(async (valid) => {
    if (!valid) return false;

    if (addTargetForm.value.instrumentId) {
      proxy.$modal.msgSuccess("编辑成功");
    } else {
      addTargetForm.value.instrumentId = props.instrumentId;
      proxy.$modal.msgSuccess("新增成功");
    }

    const { data: res } = await addInstrumentItem(addTargetForm.value);
    targetItemId.value = res;
    emits("updateTargetList");
    isShowTargetDialog.value = false;
  });
};

const reset = () => {
  proxy.resetForm("targetFormRef");
  addTargetForm.value = {};
};

const cancelBtnClick = () => {
  isShowTargetDialog.value = false;
};

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

const jcxmList = ref([]);
const loading = ref(false);
function remoteMethod(val) {
  if (val) {
    loading.value = true;
    setTimeout(() => {
      getJcxmList({ jcxmName: val }).then((res) => {
        loading.value = false;
        jcxmList.value = res.rows;
      });
    }, 200);
  } else {
    jcxmList.value = [];
  }
}

defineExpose({
  isShowTargetDialog,
  saveBtnClick,
  addTargetForm,
  jcxmList
});
</script>
